<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
</head>

<body>

    <!-- 
        fetch请求参数
        - 常用配置选项
            - method(string): HTTP 请求方法, 默认为GET( GET,POST,PUT,DELETE)
            - body(String): HTTP的请求参数
            - headers(Object) : HTTP的请求头,默认为{}
     -->

    <script>
        // console.dir(Promise)

        // fetch("http://localhost:3000/books?id=12",{
        //     method:'get'
        // }).then(function(data){
        //     return data.text()
        // }).then(function(data){
        //     console.log(data)
        // })

        // Restful 形式
        // fetch("http://localhost:3000/books/12",{
        //     method:'get'
        // }).then(function(data){
        //     return data.text()
        // }).then(function(data){
        //     console.log(data)
        // })

        // DELETE 方式请求
        // fetch("http://localhost:3000/books/12",{
        //     method:"delete"
        // })
        // .then(function(data){
        //     return data.text()
        // }).then(function(data){
        //     console.log(data)
        // })

        // POST 方式 application/x-www-form-urlencoded 方式
        // fetch("http://localhost:3000/books",{
        //     method:"post",
        //     body:"uname=lcb&pwd=123",
        //     // 这个请求头必须设置,要不然body传不过去
        //     headers:{
        //         'content-type':'application/x-www-form-urlencoded'
        //     }
        // })
        // .then(function(data){
        //     return data.text()
        // }).then(function(data){
        //     console.log(data)
        // })

        // POST application/json  
        // 这里需要注意后台 res.header('Access-Control-Allow-Headers', '*');
        // fetch('http://localhost:3000/books', {
        //     method: 'post',
        //     body: JSON.stringify({
        //         uname: '张三',
        //         pwd: '789'
        //     }),
        //     headers: {
        //         'Content-Type': 'application/json'
        //     }
        // })
        //     .then(function (data) {
        //         return data.text();
        //     }).then(function (data) {
        //         console.log(data)
        //     });
        
        // PUT 
        fetch('http://localhost:3000/books/123', {
            method: 'put',
            body: JSON.stringify({
                uname: '张三',
                pwd: '789'
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(function (data) {
            return data.text();
        }).then(function (data) {
            console.log(data)
        });
    </script>

</body>

</html>